<template>
	<view class="out">
		<view class="header">
			<view>买入金额</view>
			<input type="text" v-model="buyMoney" placeholder="100.00元起购" placeholder-style="color:#C8C7CC;font-weight:500" />
			<view class="tip">
				<text>
					<text style="color: #ff7846;">03月15号</text>
					开始计算收益
				</text>
			</view>
		</view>
		<!-- 3步操作 -->
		<text class="main-title">-------- 只需3步即可赚取收益 --------</text>
		<view class="main">
			<view>
				<image src="../../static/currentZHY/fengxian-icon.png" mode="widthFix"></image>
				<text>风险测评</text>
			</view>
			<view>
				<image src="../../static/currentZHY/bank-icon.png" mode="widthFix"></image>
				<text>绑定银行卡</text>
			</view>
			<view>
				<image src="../../static/currentZHY/idcard-icon.png" mode="widthFix"></image>
				<text>上传身份证</text>
			</view>
		</view>
		<!-- 同意协议 -->
		<view class="footer">
			<label>
				<switch type="checkbox" color="#007AFF" style="transform:scale(0.8)" @change="agree=!agree" />
				<text>基金销售服务由宇宁基金提供，本人已阅读并同意该产品的基金合同，招募说明书，产品规则,信息披露材料及相关协议,充分了解产品的风险特性，并自愿承担相关投资风险。</text>
			</label>
			<button @tap="buyNow">立刻购买</button>
			<uni-popup ref="popup" type="message">
			    <uni-popup-message type="error" message="请勾选基金协议" :duration="2000"></uni-popup-message>
			</uni-popup>
			<uni-popup ref="popup2" type="message">
			    <uni-popup-message type="error" message="请填写购买金额" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentFundInfo: {},
				buyMoney:'',
				agree: false
			}
		},
		methods: {
			init(){
				console.log(this.currentFundInfo);
				uni.setNavigationBarTitle({
					title: '购买' + this.currentFundInfo.name
				});
			},
			buyNow() {
				console.log(this.agree);
				if(this.buyMoney == ''){
					this.$refs.popup2.open('center');
				}
				else if(this.agree && this.buyMoney!=''){
					uni.navigateTo({
					    url: '/pages/current_buyRes/current_buyRes'
					});
				} else {
					this.$refs.popup.open('center');
				}
			}
		},
		onLoad(options) {
			const that = this;
			// 获取上个页面传过来的数据
			const eventChannel = this.getOpenerEventChannel()
			// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			eventChannel.on('acceptDataFromOpenerPage', function(data) {
				that.currentFundInfo = data;
			});
			// 初始化页面
			this.init();
		}
	}
</script>

<style lang="scss" scoped>
	.out {
		background-color: #f5f5f5;
		height: 100vh;
	}

	.header {
		padding: 24rpx;
		background-color: #FFFFFF;
		margin-top: 12rpx;
		color: #808080;

		input {
			margin-top: 24rpx;
			color: #555555;
			font-size: 48rpx;
			font-weight: bold;
		}

		.tip {
			color: #333333;
			margin-top: 36rpx;
			border-radius: 12rpx;
			padding: 12rpx 24rpx;
			background-color: #fff1ec;
		}
	}

	.main-title {
		text-align: center;
		display: block;
		margin-top: 36rpx;
		font-size: 28rpx;
		color: #808080;
	}

	.main {
		display: flex;
		justify-content: center;
		color: #8F8F94;

		view {
			margin-top: 36rpx;
			width: 300rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 120rpx;
			}

			text {
				margin-left: 6rpx;
				margin-top: 6rpx;
				font-size: 28rpx;
			}
		}
	}

	.footer {
		position: absolute;
		bottom: 0;
		padding: 24rpx;

		label {
			display: flex;

			switch {
				margin-top: -16rpx;
			}

			text {
				text-align: justify;
				margin-left: 12rpx;
				color: #8F8F94;
				font-size: 28rpx;
			}
		}

		button {
			margin-top: 48rpx;
			font-size: 32rpx;
			background-color: #007AFF;
			color: #FFFFFF;
		}
		
	}
</style>
